<template>
<div>
  <table class="el-table ui-table" :class="{'table-fixed-header': isFixed}"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <thead class="ui-table__thead">
      <tr>
        <th class="ui-table_column_0">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="checkAll" @change="changeCheckAll"></el-checkbox>
              <span style="margin-left:5px">全选</span>
            </p>
          </div>
        </th>
        <th class="ui-table_column_1">
          <div class="cell t-left">项目名称</div>
        </th>
        <th class="ui-table_column_2">
          <div class="cell">候选人</div>
        </th>
        <th class="ui-table_column_3">
          <div class="cell">所有者</div>
        </th>
        <th class="ui-table_column_4">
          <div class="cell">项目协作</div>
        </th>
        <th class="ui-table_column_5">
          <div class="cell">创建时间</div>
        </th>
      </tr>
      <tr v-if="!noHeaderHandleVisible">
        <th colspan="6">
          <div class="cell t-left">
            <div class="header-handle-box">
              <el-button class="table-header-button" size="mini" @click="relaseProject">
                解散项目
              </el-button>
            </div>
          </div>
        </th>
      </tr>
    </thead>
  </table>
  <div v-if="isFixed" style="height:50px;"></div>
  <table class="el-table ui-table"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <tbody>
      <tr v-for="column in tableData">
        <!-- 操作选择 -->
        <td class="ui-table_column_0" width="80">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="column.isChecked" @change="changeCheckItem"></el-checkbox>
              <i class="icon icon-collection ml-10" @click="column.isCollection = !column.isCollection" :class="{active: column.isCollection}" ></i>
            </p>
          </div>
        </td>

        <!-- 项目名称 -->
        <td class="ui-table_column_1">
          <div class="cell t-left" width="25%">
            <div class="t-project-block">
              <p><div class="button-text" @click="toDetail(column.id)">{{column.projectName}}</div></p>
              <p>
                <span>{{column.contactsNum}}新联系人</span> | 
                <span>{{column.alreadyConnectedNum}}已联系</span> | 
                <span>{{column.replyNum}}已回复</span>
              </p>
            </div>
          </div>
        </td>
        
        <!-- 候选人 -->
        <td class="ui-table_column_2" width="18%">
          <div class="cell">
            {{column.candidateNum}}
          </div>
        </td>

        <!-- 所有者 -->
        <td class="ui-table_column_3" width="22%">
          <div class="cell">
            <div class="user-head mini">
              <img :src="column.ownerHead" alt="">
            </div>
            <span class="ml-5" style="vertical-align: middle;">{{column.ownerName}}</span>
          </div>
        </td>

        <!-- 项目协作 -->
        <td class="ui-table_column_4" width="14%">
          <div class="cell">
            <i class="icon icon-collaboration" @click="collaborationVisible=true"></i>
          </div>
        </td>

        <!-- 创建时间 -->
        <td class="ui-table_column_5">
          <div class="cell">
            {{column.createTime}}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <m-collaboration :visible.sync="collaborationVisible"></m-collaboration>
</div>
</template>

<script>
  import api from '@/api/api.js'
  import {Checkbox, Button, Table, TableColumn, Row, Col} from 'element-ui'
  import Collaboration from './components/collaboration'
  export default {
    components: {
      [Checkbox.name]: Checkbox,
      [Button.name]: Button,
      [Table.name]: Table,
      [TableColumn.name]: TableColumn,
      [Row.name]: Row,
      [Col.name]: Col,
      'm-collaboration': Collaboration,
    },
    data () {
      return {
        loading: true,
        mailVisible: false, //邮件功能弹窗
        tableData: [], //表格数据内容
        currentPage: 1, //当前页数
        collaborationVisible: false, //项目协作弹窗
        noHeaderHandleVisible: true,
        checkAll: false,
        isFixed: false
      }
    },
    created() {
      //获取表头配置数据
      this.loadData()
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/project') == 0){
          this.initSticky()
        }
      })
    },
    mounted() {
      // this.initWidth()
      window.onresize = () => {
        this.initWidth()
      }
    },
    methods: {
      initSticky(){
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight + 
          document.getElementsByClassName('search-form')[0].clientHeight + 30
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
          this.initWidth()
        } else {
          this.isFixed = false
          this.initWidth()
        }
      },
      initWidth() {
        for(let i=0; i<6; i++) {
          if(document.getElementsByClassName('ui-table_column_' + i)[1]) {
            const _w = document.getElementsByClassName('ui-table_column_' + i)[1].clientWidth || 0
            document.getElementsByClassName('ui-table_column_' + i)[0].style.width = _w + 'px'
          }
        }
        if(document.getElementsByClassName('ui-table')[1]){
          document.getElementsByClassName('ui-table')[0].style.width = document.getElementsByClassName('ui-table')[1].clientWidth + 'px'
        }
      },
      loadData() {
        // 获取表格数据
        this.loading = true;
        var data = []
        for(var i=0; i<20; i++){
          data.push({
            id: i+1,
            projectName: '我的收藏',
            contactsNum: 13,
            alreadyConnectedNum: 20,
            replyNum: 14,
            candidateNum: 256,
            ownerHead: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg',
            ownerName: 'OmegaLiu',
            createTime: '2018-10-22',
            isChecked: false
          })
        }
        this.tableData = this.tableData.concat(data);
        this.$nextTick(_ => {
          this.initWidth()
        })
        this.loading = false;
      },
      spanMethod({ row, column, rowIndex, columnIndex }) {
        if(rowIndex == 0 ){
          if(columnIndex == 0){
            return [1, 6]
          }else{
            return [0, 0]
          }
        }
      },
      toDetail(id) {
        this.$emit('toDetail', id)
      },
      //点击全选时
      changeCheckAll(){
        var flag = true;
        this.tableData.forEach(item => {
          if(!item.isChecked){
            flag = false
          }
        })
        if(flag){
          this.noHeaderHandleVisible = true
        }else{
          this.noHeaderHandleVisible = false
        }
        this.tableData.forEach(item => {
          item.isChecked = !flag
        })
      },
      changeCheckItem() {
        var flag = false
        this.tableData.forEach(item => {
          if(item.isChecked){
            flag = true
          }
        })
        if(!flag){
          this.noHeaderHandleVisible = true
        }else{
          this.noHeaderHandleVisible = false
        }
      },
      //解散项目
      relaseProject() {
        this.$confirm('确认解散这些项目？', '警告' ,{
          type: 'warning'
        }).then(_ => {
          done()
        }).catch(_ => {})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .t-project-block{
    padding: 15px 0;
    p{
      line-height: 30px;
    }
  }
</style>
